<template>
	<view class="container">
		<view class="v-product-image">
			<image :src="getServerPath(datas.ProductInfo.ImageUrl)" mode="aspectFill"></image>
		</view>
		<view class="v-summary">
			<view class="v-product-price">
				￥{{ datas.ProductInfo.Price }}
				<view class="v-product-originalprice">￥{{ datas.ProductInfo.OriginalPrice }}</view>
			</view>
			<view class="v-product-title">
				{{ datas.ProductInfo.Title }}
			</view>
			<view class="v-product-other">
				<view class="v-product-other-item">销量：{{ datas.ProductInfo.BuyCount }}</view>
				<view class="v-product-other-item">库存：{{ datas.ProductInfo.Inventory }}</view>
			</view>
		</view>
		<view class="v-product-section">产品详情</view>
		<view class="v-product-content">
			{{ datas.ProductInfo.Content }}
		</view>
		<view class="v-footer-op">
			<view type="default" class="v-footer-op-left" @click="service">
				<image src="../../static/customerservice.png" mode="aspectFit"></image>
			</view>
			<view class="v-footer-op-right" @click="buyProduct">立即购买</view>
		</view>
		<uni-popup ref="message" type="message" class="pop-msg">
			<uni-popup-message :type="msgType" :message="messageText" :duration="duration"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import {
		dateUtils,
		authTokenUtil,
		validLoginToken
	} from "../../common/util.js"
	export default {
		data() {
			return {
				messageText: '',
				msgType: 'success',
				duration: 2000,
				
				datas: {
					ProductInfo: {
						Id: '',
						Title: '',
						ImageUrl: '',
						Price: '',
						OriginalPrice: '',
						BuyCount: 0,
						Inventory: 0,
						Content: '',
						CreateTime: '',
						Source: 1 //1:平台自营 2:商家运营
					}
				}
			};
		},
		methods: {
			service:function(){
				uni.navigateTo({
					url:"/pages/sys/customer-service"
				})
			},
			buyProduct: function() {
				let _this = this;
				//正式代码
				var authToken = authTokenUtil();
				//正式代码
				uni.request({
					url: _this.sysInfo.BasePath + 'Shop/BuyProduct',
					method: 'Post',
					data: _this.datas.ProductInfo,
					header: {
						'content-type': 'application/json',
						'Authorization': `${authToken}`
					},
					success: (res) => {
						if (res && res.data && res.data.Succeeded === true) {
							uni.redirectTo({
								url: "/pages/store/order"
							})
						} else {
							_this.sysUtils.tip({
								sender: _this,
								title: '购买产品失败！',
								icon: 'error'
							});
						}
					},
					fail: () => {
						_this.sysUtils.tip({
							sender: _this,
							title: '购买产品失败！',
							icon: 'error'
						});
					},
					complete: () => {
						
					}
				});
			},
			getServerPath: function(url) {
				let _this = this;
				console.log(`${_this.sysInfo.ImageBasePath}${url}`);
				return `${_this.sysInfo.ImageBasePath}${url}`;
			},
			init: function() {
				let _this = this;
				console.log('init');
				uni.getStorage({
					key: 'CurrentProduct',
					success: (res) => {
						if (res) {
							console.log(res);
							_this.datas.ProductInfo = res.data;
						}
					},
					fail: (error) => {
						console.log(error);
					}
				});
			}
		},
		onShow() {
			let _this = this;
			// _this.init();
		},
		created() {
			let _this = this;
			validLoginToken(null, () => {
				uni.reLaunch({
					url: "/pages/account/login"
				})
			})
			_this.init();
		}
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		background-color: #f0f0f0;
		height: 100%;
		width: 100%;
		padding-bottom: 150rpx;
	}

	.v-product-image {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
	}

	.v-product-image image {
		width: 100%;
	}

	.v-summary {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		background-color: #fff;
		padding: 20rpx;
	}

	.v-product-price {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-end;
		color: #ff5343;
		font-size: 56rpx;
		fong-weight: bold;
		margin-top: 20rpx;
	}

	.v-product-originalprice {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-end;
		color: #999;
		font-size: 26rpx;
		margin-left: 20rpx;
		margin-bottom: 10rpx;
		text-decoration: line-through;
	}

	.v-product-title {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		margin-top: 32rpx;
		font-size: 32rpx;
	}

	.v-product-other {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: stretch;
		margin-top: 32rpx;
	}

	.v-product-other-item {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: stretch;
		font-size: 26rpx;
		color: #666;
		margin-left: 50rpx;
	}

	.v-product-section {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		font-weight: bold;
		font-size: 32rpx;
		color: #333;
		margin: 20rpx ;
	}

	.v-product-content {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		background-color: #fff;
		padding: 20rpx;
		flex: 1;
		min-height: 200rpx;
	}

	.v-footer-op {
		position: fixed;
		z-index: 10001;
		height: 150rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		bottom: 0;
		border-radius: 10rpx 10rpx 0 0;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		box-shadow: 1rpx 1rpx 20rpx #ccc;
	}

	.v-footer-op .v-footer-op-left,
	.v-footer-op .v-footer-op-right {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		color: white;
	}

	.v-footer-op-left {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background-color: #c93a00d0;
		height: 80rpx;
		width: 80rpx;
		border-radius: 50rpx;
		color: #ce4d0e !important;
		margin: 0 80rpx;
	}

	.v-footer-op-left image {
		height: 60rpx;
		width: 60rpx;
	}

	.v-footer-op-right {
		background-color: #ce4d0e;
		width: 50%;
		height: 80rpx;
		border-radius: 50rpx;
		margin-left: 32rpx;
		margin-right: 50rpx;
	}
</style>